<!DOCTYPE html>
<html>

	<head>
		<title>AES Exchange 数字系统后台管理</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="${ctxPath}/assets/common/layui/css/layui.css" />
		<link rel="stylesheet" href="${ctxPath}/assets/common/css/login.css" media="all">
		<link rel="stylesheet" href="${ctxPath}/assets/common/css/index.css">

		<link rel="stylesheet" href="${ctxPath}/assets/liuyun/css/default.css">
		<!--必要样式-->
		<link rel="stylesheet" href="${ctxPath}/assets/liuyun/css/styles.css">
		<link rel="stylesheet" href="${ctxPath}/assets/liuyun/css/demo.css">
		<link rel="stylesheet" href="${ctxPath}/assets/liuyun/css/loaders.css">

		<style>
			body {
            width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
        }
		.login-con input {
			width: calc(100% - 100px);
			margin-top: 0px;
			background: rgba(0, 0, 0, 0);
			left: -9px;
			padding: 16px 48px;
			border-top: 0px solid rgba(57, 61, 82, 0);
			border-bottom: 0px solid rgba(57, 61, 82, 0);
			border: #a9a8ab solid 1px;
			border-radius: 3px;
			outline: none;
			font-family: 'Gudea', sans-serif;
			box-shadow: none;
			color: #673AB7 !important;
			font-size: 14px;
        }
		.icon {
			position: absolute;
			z-index: 1;
			left: 20px;
			top: -2px;
			opacity: 1;
			color: #000;
		}
		.layui-btn {
			height: 45px;
			line-height: 45px;
			border-radius: 3px;
		}
		.login-title {
			color: #dcdcdc;
			height: 85px;
			font-size: 26px;
			text-align: center;
			margin-top: -66px;
		}
        .loginmain {
			background: rgba(27, 27, 31, 0.87);
			width: 280px;
			height: 380px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			padding: 100px 40px 40px 40px;
			box-shadow: 0px 15px 15px rgba(35, 39, 58, 0.37);
			z-index: 99999;
			border-radius: 6px;
		}
    </style>
		<script>
			if (window != top)
            top.location.replace(location.href);
    </script>
	</head>

	<body>
		<div class="loginmain">

			<!--div style="text-align: center;margin-top: 0;">
        <img src="${ctxPath}/assets/common/image/logo.png" alt="" style="height: 80px;">
    </div-->

			<div class="login-title">
				<img src="${ctxPath}/assets/common/image/logo_txt1.png" alt="" style="height: 80px;">
				<!--span style="font-size: 42px!important;line-height: 52px!important;font-weight: 600!important;background-image: -webkit-linear-gradient(92deg, #001aa9, #effaff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 01s infinite linear;">Welcome !</span-->
			</div>

			<div class="login-con">
				<form class="layui-card-body layui-form layui-form-pane" action="${ctxPath}/login" method="post" style="padding: 35px 40px;">
					<div class="login-user">
						<div class="icon">
							<img src="${ctxPath}/assets/common/image/cd-icon-username.png" alt="">
						</div>

						<input type="text" name="username" placeholder="用户名" autocomplete="off" value="">
					</div>

					<div class="login-pwd">
						<div class="icon">
							<img src="${ctxPath}/assets/common/image/cd-icon-password.png" alt="">
						</div>

						<input type="password" name="password" placeholder="密码" autocomplete="off" value="">
					</div>
					<div class="login-pwd" style="margin-bottom: 42px">
						<div class="icon">
							<img src="${ctxPath}/assets/common/image/cd-icon-password.png" alt="">
						</div>
						<input type="password" name="safe" placeholder="安全码" autocomplete="off" value="">
					</div>

					<div class="login-btn">
						<button lay-filter="login-submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
					</div>

				</form>
			</div>

		</div>



		<script type="text/javascript" src="${ctxPath}/assets/liuyun/js/jquery.min.js"></script>
		<script type="text/javascript" src="${ctxPath}/assets/liuyun/js/jquery-ui.min.js"></script>
		<script type="text/javascript" src='${ctxPath}/assets/liuyun/js/stopExecutionOnTimeout.js?t=1'></script>
		<script type="text/javascript" src="${ctxPath}/assets/liuyun/js/Particleground.js"></script>
		<script type="text/javascript" src="${ctxPath}/assets/liuyun/Js/Treatment.js"></script>
		<script type="text/javascript" src="${ctxPath}/assets/liuyun/js/jquery.mockjax.js"></script>
		@/* 加入contextPath属性和session超时的配置 */
		<script type="text/javascript">
			var Feng = {
							ctxPath: "",
							addCtx: function (ctx) {
								if (this.ctxPath === "") {
									this.ctxPath = ctx;
								}
							}
						};
						Feng.addCtx("${ctxPath}");
		</script>
		<script type="text/javascript" src="${ctxPath}/assets/common/js/ban2.js"></script>
		<script type="text/javascript" src="${ctxPath}/assets/common/js/ban.js"></script>
		<script type="text/javascript" src="${ctxPath}/assets/common/layui/layui.js"></script>
		<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js"></script>
		<script>
			layui.use(['layer', 'form'], function () {
							var $ = layui.jquery;
							var layer = layui.layer;
							var form = layui.form;
			
							// 表单提交
							form.on('submit(login-submit)', function (obj) {
								return true;
							});
			
							// 图形验证码
							// $('.login-captcha').click(function () {
							//     this.src = this.src + '?t=' + (new Date).getTime();
							// });
			
							var errorMsg = "${tips!}";
							if (errorMsg) {
								layer.msg(errorMsg, {icon: 5, anim: 6});
							}
			
						});
		</script>
		<script type="text/javascript" src="${ctxPath}/assets/liuyun/img/ThreeWebGL.js"></script>
		<script type="text/javascript" src="${ctxPath}/assets/liuyun/img/ThreeExtras.js"></script>
		<script type="text/javascript" src="${ctxPath}/assets/liuyun/img/Detector.js"></script>
		<script type="text/javascript" src="${ctxPath}/assets/liuyun/img/RequestAnimationFrame.js"></script>
		<script id="vs" type="x-shader/x-vertex">
			varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
		</script>
		<script id="fs" type="x-shader/x-fragment">
			uniform sampler2D map; uniform vec3 fogColor; uniform float fogNear; uniform float fogFar; varying vec2 vUv; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep( fogNear, fogFar, depth ); gl_FragColor = texture2D( map, vUv ); gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 ); gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor ); }

		</script>
		<script type="text/javascript">
			if(!Detector.webgl) Detector.addGetWebGLMessage();
						var canvas = document.createElement('canvas');
						canvas.width = 32;
						canvas.height = window.innerHeight;
						var context = canvas.getContext('2d');
						var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
						gradient.addColorStop(0, "#1332b0");
						gradient.addColorStop(0.5, "#1332b0");
						context.fillStyle = gradient;
						context.fillRect(0, 0, canvas.width, canvas.height);
						document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
						var container;
						var camera, scene, renderer, sky, mesh, geometry, material, i, h, color, colors = [],
							sprite, size, x, y, z;
						var mouseX = 0,
							mouseY = 0;
						var start_time = new Date().getTime();
						var windowHalfX = window.innerWidth / 2;
						var windowHalfY = window.innerHeight / 2;
						init();
						animate();
			
						function init() {
							container = document.createElement('div');
							document.body.appendChild(container);
							camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 3000);
							camera.position.z = 6000;
							scene = new THREE.Scene();
							geometry = new THREE.Geometry();
							var texture = THREE.ImageUtils.loadTexture('');
							texture.magFilter = THREE.LinearMipMapLinearFilter;
							texture.minFilter = THREE.LinearMipMapLinearFilter;
							var fog = new THREE.Fog(0x4584b4, -100, 3000);
							material = new THREE.MeshShaderMaterial({
								uniforms: {
									"map": {
										type: "t",
										value: 2,
										texture: texture
									},
									"fogColor": {
										type: "c",
										value: fog.color
									},
									"fogNear": {
										type: "f",
										value: fog.near
									},
									"fogFar": {
										type: "f",
										value: fog.far
									},
								},
								vertexShader: document.getElementById('vs').textContent,
								fragmentShader: document.getElementById('fs').textContent,
								depthTest: false
							});
							var plane = new THREE.Mesh(new THREE.Plane(64, 64));
							for(i = 0; i < 8000; i++) {
								plane.position.x = Math.random() * 1000 - 500;
								plane.position.y = -Math.random() * Math.random() * 200 - 15;
								plane.position.z = i;
								plane.rotation.z = Math.random() * Math.PI;
								plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
								GeometryUtils.merge(geometry, plane)
							}
							mesh = new THREE.Mesh(geometry, material);
							scene.addObject(mesh);
							mesh = new THREE.Mesh(geometry, material);
							mesh.position.z = -8000;
							scene.addObject(mesh);
							renderer = new THREE.WebGLRenderer({
								antialias: false
							});
							renderer.setSize(window.innerWidth, window.innerHeight);
							container.appendChild(renderer.domElement);
							document.addEventListener('mousemove', onDocumentMouseMove, false);
							window.addEventListener('resize', onWindowResize, false)
						}
			
						function onDocumentMouseMove(event) {
							mouseX = (event.clientX - windowHalfX) * 0.25;
							mouseY = (event.clientY - windowHalfY) * 0.15
						}
			
						function onWindowResize(event) {
							camera.aspect = window.innerWidth / window.innerHeight;
							camera.updateProjectionMatrix();
							renderer.setSize(window.innerWidth, window.innerHeight)
						}
			
						function animate() {
							requestAnimationFrame(animate);
							render()
						}
			
						function render() {
							position = ((new Date().getTime() - start_time) * 0.03) % 8000;
							camera.position.x += (mouseX - camera.target.position.x) * 0.01;
							camera.position.y += (-mouseY - camera.target.position.y) * 0.01;
							camera.position.z = -position + 8000;
							camera.target.position.x = camera.position.x;
							camera.target.position.y = camera.position.y;
							camera.target.position.z = camera.position.z - 1000;
							renderer.render(scene, camera)
						}
		</script>
	</body>

</html>
